<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的账单</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />


    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!--<script src="../static/js/jquery-3.4.1.js"></script>-->
    <!--<script src="../static/js/jQueryCode.js"></script>-->
    <!--<script src="../static/js/bootstrap.min.js"></script>-->

    <script>
        $(function () {
            //查看订单详情
            $("input").click(function () {
                var id = $(this).attr("id");
                $.post("/reservation/getBillInfo",{id:id},function (reservation) {

                    // ----------------------------------加入订单模态框----------------------------------
                    $("#modal-bill-detail .modal-body .container").html("");
                    // 在模态框里插入如下信息
                    $("#modal-bill-detail .modal-body .container").append(
                        "<table id='bill-detail-li' class='bill-detail-li'><tr class='bill-detail'><th>预定人:</th><td>" + reservation.userName
                        + "</td></tr><tr class='bill-detail'><th>预约医院:</th><td>" + reservation.hospitalName
                        + "</td></tr><tr class='bill-detail'><th>科室:</th><td>" + reservation.departmentName
                        + "</td></tr><tr class='bill-detail'><th>就诊医生:</th><td>" + reservation.doctorName
                        + "</td></tr><tr class='bill-detail'><th>联系方式:</th><td>" + reservation.doctorPhone
                        + "</td></tr><tr class='bill-detail'><th>预约时间:</th><td>" + reservation.time
                        + "</td></tr><tr class='bill-detail'><th>支付金额:</th><td>" + reservation.pay
                        + "</td></tr><tr class='bill-detail'><th>账单状态:</th><td>" + reservation.status
                        + "</td></tr></table>"
                    );

                    if(reservation.status==="待付款"){
                        // ----------------------------------根据付款状态插入按钮----------------------------------
                        $("#modal-bill-detail .modal-body .container").append(
                            "<div class='bill-detail-btn-li'><input value='" + reservation.id
                            + "' id='reservationId' type='hidden'/><input value='" + reservation.pay
                            + "' id='reservationPay' type='hidden'/><input id='pay' type='button' value='立即付款'/>"
                            + "<input id='cancel' type='button' value='取消预约' data-dismiss='modal'/></div>"
                        );
                    }
                })
            });

            //点击取消预约
            $("#modal-bill-detail .modal-body .container").on("click", "#cancel", function () {
               confirm("取消成功！");
                var id = $("#reservationId").val();
               location.href = "/reservation/cancelReserve?id=" + id;
            });

            // 点击付款按钮，弹出模态框
            $("#modal-bill-detail .modal-body .container").on("click","#pay",function () {
                var id = $("#reservationId").val();
                var pay = $("#reservationPay").val();
                $.post("/reservation/pay", {id:id, pay:pay}, function (msg) {
                    confirm(msg);
                    if(msg === "支付完成，预约成功！")
                        location.href = "/reservation/toBill";
                    else
                        location.href = "/reservation/toRecharge"
                })
            })
        })
    </script>

</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <h3>我的账单</h3>
        <hr class="divider"><!-- 分界线 -->
        <!--查询账单 start-->
        <table id="bill-li" class="bill-li">
            <tr class="bill" th:each="bill : ${billList}">
                <th class="bill-li-th d-flex align-items-center">账单号：</th>
                <td class="bill-li-bill-num d-flex align-items-center" th:text="${bill.billId}">1</td>
                <td class="bill-li-btn d-flex align-items-center">
                    <input th:id="${bill.billId}" class="input-btn animation" th:value="详情" type="button" data-toggle="modal" data-target="#modal-bill-detail" />
                </td>
            </tr>
        </table>
        <!--查询账单 end-->
    </div>
    <!--订单详情模态框 start-->
    <div id="modal-bill-detail" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--模态框头部-->
                <div class="modal-header">
                    <h4>账单详情</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!--模态框身体-->
                <div class="modal-body">
                    <div class="container">
                        <table id="bill-detail-li" class="bill-detail-li">
                            <tr class="bill-detail">
                                <th>预定人:</th>
                                <td>reservation.userName</td>
                            </tr>
                            <tr class="bill-detail">
                                <th>预约医院:</th>
                                <td>reservation.hospitalName</td>
                            </tr>
                            <tr class="bill-detail">
                                <th>科室:</th>
                                <td>reservation.departmentName</td>
                            </tr>
                            <tr class="bill-detail">
                                <th>就诊医生:</th>
                                <td>reservation.doctorName</td>
                            </tr>
                            <tr class="bill-detail">
                                <th>联系方式:</th>
                                <td>reservation.doctorPhone</td>
                            </tr>
                            <tr class="bill-detail">
                                <th>预约时间:</th>
                                <td>reservation.time</td>
                            </tr>
                            <tr class="bill-detail">
                                <th>支付金额:</th>
                                <td>reservation.pay</td>
                            </tr>
                            <tr class="bill-detail">
                                <th>账单状态:</th>
                                <td>reservation.status</td>
                            </tr>
                        </table>
                        <div class="bill-detail-btn-li">
                            <input value="reservation.id" id="reservationId" type="hidden" />
                            <input value="reservation.pay" id="reservationPay" type="hidden" />
                            <input id="pay" type="button" value="付款"/>
                            <input id="cancel" type="button" value="取消" data-dismiss="modal" />
                        </div>
                    </div>
                </div>
                <!--模态框尾部-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>
    <!--订单详情模态框 end-->
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>




</body>
</html>